<template>
    <view class="focus-container">
      <!-- 模式选择 -->
      <view class="mode-selector">
        <view 
          class="mode-btn" 
          :class="{ active: mode === 'countdown' }"
          @click="mode = 'countdown'"
        >
          倒计时
        </view>
        <view 
          class="mode-btn" 
          :class="{ active: mode === 'stopwatch' }"
          @click="mode = 'stopwatch'"
        >
          正计时
        </view>
      </view>
  
      <!-- 时间显示 -->
      <view class="time-display">
        <text class="time">{{ formattedTime }}</text>
      </view>
  
      <!-- 时间设置 -->
      <view class="time-setter" v-if="mode === 'countdown'">
        <picker 
          mode="selector" 
          :range="hours" 
          range-key="label"
          @change="handleHourChange"
        >
          <view class="picker">{{ selectedHour.label }}</view>
        </picker>
        <text>:</text>
        <picker 
          mode="selector" 
          :range="minutes" 
          range-key="label"
          @change="handleMinuteChange"
        >
          <view class="picker">{{ selectedMinute.label }}</view>
        </picker>
      </view>
  
      <!-- 控制按钮 -->
      <view class="control-buttons">
        <view 
          class="control-btn" 
          :class="{ disabled: isRunning }"
          @click="startTimer"
        >
          {{ isRunning ? '进行中' : '开始' }}
        </view>
        <view 
          class="control-btn" 
          :class="{ disabled: !isRunning }"
          @click="pauseTimer"
        >
          暂停
        </view>
        <view 
          class="control-btn" 
          @click="resetTimer"
        >
          重置
        </view>
      </view>
      <view class="close-btn-container">
        <view 
          class="control-btn close-btn"
          @click="goBackHome"
        >
          关闭
        </view>
      </view>
  
      <!-- 完成提示 -->
      <u-modal 
        v-model="showFinishModal" 
        title="专注完成" 
        content="恭喜你完成本次专注！"
        :show-cancel-button="false"
        @confirm="showFinishModal = false"
      ></u-modal>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        mode: 'stopwatch', // countdown: 倒计时, stopwatch: 正计时
        totalSeconds: 0,  // 修改：默认从0开始
        isRunning: false,
        timer: null,
        showFinishModal: false,
        hours: Array.from({ length: 3 }, (_, i) => ({ 
          value: i, 
          label: `${i}小时` 
        })),
        minutes: Array.from({ length: 6 }, (_, i) => ({ 
          value: i * 10, 
          label: `${i * 10}分钟` 
        })),
        selectedHour: { value: 0, label: '0小时' },
        selectedMinute: { value: 0, label: '0分钟' }  // 修改：默认0分钟
      }
    },
    computed: {
      formattedTime() {
        const hours = Math.floor(this.totalSeconds / 3600)
        const minutes = Math.floor((this.totalSeconds % 3600) / 60)
        const seconds = this.totalSeconds % 60
        
        return [
          hours.toString().padStart(2, '0'),
          minutes.toString().padStart(2, '0'),
          seconds.toString().padStart(2, '0')
        ].join(':')
      }
    },
    methods: {
      handleHourChange(e) {
        this.selectedHour = this.hours[e.detail.value]
        this.updateTotalSeconds()
      },
      handleMinuteChange(e) {
        this.selectedMinute = this.minutes[e.detail.value]
        this.updateTotalSeconds()
      },
      updateTotalSeconds() {
        this.totalSeconds = this.selectedHour.value * 3600 + this.selectedMinute.value * 60
      },
      startTimer() {
        if (this.isRunning) return
        
        this.isRunning = true
        
        if (this.mode === 'countdown') {
          this.timer = setInterval(() => {
            if (this.totalSeconds <= 0) {
              this.finishTimer()
              return
            }
            this.totalSeconds--
          }, 1000)
        } else {
          this.totalSeconds = 0  // 新增：正计时模式下从0开始
          this.timer = setInterval(() => {
            if (this.totalSeconds >= 7200) { // 最大2小时
              this.finishTimer()
              return
            }
            this.totalSeconds++
          }, 1000)
        }
      },
      pauseTimer() {
        if (!this.isRunning) return
        
        clearInterval(this.timer)
        this.isRunning = false
      },
      resetTimer() {
        this.pauseTimer()
        if (this.mode === 'countdown') {
          this.updateTotalSeconds()
        } else {
          this.totalSeconds = 0
        }
      },
      finishTimer() {
        this.pauseTimer()
        this.showFinishModal = true
        
        // 震动提示
        uni.vibrateLong()
        
        // 播放提示音
        const innerAudioContext = uni.createInnerAudioContext()
        innerAudioContext.src = 'https://xxx.com/notification.mp3' // 替换为你的提示音地址
        innerAudioContext.play()
      },
      goBackHome() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      },
    },
    onUnload() {
      this.pauseTimer()
    }
  }
  </script>
  
  <style>
  .focus-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    padding-top: calc(120px + env(safe-area-inset-top)); /* 添加刘海屏适配 */
    height: 100vh;
    background-color: #f8f8f8;
  }
  
  .mode-selector {
    display: flex;
    margin-bottom: 30px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .mode-btn {
    padding: 12px 24px;
    background-color: #fff;
    color: #666;
    font-size: 16px;
    transition: all 0.3s;
  }
  
  .mode-btn.active {
    background-color: #4A89DC;
    color: #fff;
  }
  
  .time-display {
    margin: 30px 0;
  }
  
  .time {
    font-size: 60px;
    font-weight: bold;
    color: #333;
    font-family: monospace;
  }
  
  .time-setter {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }
  
  .picker {
    padding: 8px 16px;
    background-color: #fff;
    border-radius: 8px;
    margin: 0 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  .control-buttons {
    display: flex;
    margin-top: 30px;
  }
  
  .control-btn {
    padding: 12px 24px;
    margin: 0 10px;
    background-color: #4A89DC;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
  }
  
  .control-btn.disabled {
    background-color: #ccc;
    opacity: 0.7;
  }
  .close-btn-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }
  .close-btn {
    background-color: #ff6b6b !important;
  }
  </style>